<template>
	<view class="indexContainer">
		<view class="header">
			<image class="logo" src="../../static/images/logo.png" mode=""></image>
			<view class="search">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" placeholder="搜索商品" placeholder-style="font-size:28rpx;color:red;"/>
			</view>
			<button class="btn" type="default">北方汉子</button>
		</view>
		<!-- 导航 -->
		<scroll-view scroll-x="true" enable-flex class="navScroll">
			<view class="scrollItem" :class="{active:defaultId === -1}" @click="defaultId = -1">推荐</view>
			<view 
			class="scrollItem" 
			:class="{active:defaultId === nav.L1Id}" 
			@click="defaultId = nav.L1Id" 
			v-for="(nav,index) in navData" 
			:key="nav.L1Id">{{nav.text}}</view>
		</scroll-view>
		<!-- 主体 -->
		<scroll-view scroll-y="true" class="main" enable-flex>
			<view class="mainItem">
				<!-- 这是推荐的内容 -->
				<view v-show="defaultId===-1">
					<!-- 轮播图 -->
					<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<view class="swiper-item">
								<image src="https://yanxuan.nosdn.127.net/096ea9e7ef273981f2324485b89832dd.jpeg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="https://yanxuan.nosdn.127.net/d55d8ce28940daf36051c9ef4b6fe071.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="https://yanxuan.nosdn.127.net/d69b6263456153fc16ebb74977d202ca.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image src="https://yanxuan.nosdn.127.net/0e7479585f9ecda3e78f01b3f9cb97ee.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="iconList">
						<view class="iconItem" v-for="(icon,index) in iconData" :key="index">
							<image class="iconImg" :src="icon.icon" mode=""></image>
							<text class="iconText">{{icon.desc}}</text>
						</view>
					</view>
					<view class="catList">
						<view class="catItem" v-for="(nav,index) in navData" :key="nav.L1Id">
							<image class="catImg" :src="nav.picUrl" mode=""></image>
							<text class="catText">{{nav.text}}</text>
						</view>
					</view>
					<Floor v-for="(floor,index) in floorList" :key="index" :floor="floor"></Floor>
				</view>
				<!-- 属于推荐后面的内容 -->
				<view v-show="defaultId !==-1">
					<Card :defaultId = "defaultId"></Card>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Floor from './components/Floor/index.vue'
	import {mapGetters} from 'vuex'
	import Card from './components/Card/index.vue'
	export default {
		components:{
			Floor,
			Card
		},
		data(){
			return {
				defaultId:-1,
			}
		},
		mounted(){
			this.getIndexData()
		},
		methods:{
			getIndexData(){
				this.$store.dispatch('getIndexData')
			}
		},
		computed:{
			...mapGetters(['navData','iconData','floorList'])
		}
	}
</script>

<style lang="stylus" scoped>
	.indexContainer
		height 100%
		.header
			height 80rpx
			display flex
			align-items center
			.logo
				width 120rpx
				height 40rpx
				margin 0 20rpx
			.search
				height 60rpx
				flex 1
				border 1px solid #aaa
				display flex
				box-sizing border-box
				align-items center
				.iconfont
					margin 0 10rpx
			.btn
				width 140rpx
				height 60rpx
				font-size 28rpx
				line-height 60rpx
				text-align center
				padding 0 10rpx
				margin 0 10rpx
		.navScroll
			height 80rpx
			display flex
			.scrollItem
				flex-shrink 0
				width 140rpx
				height 80rpx
				line-height 80rpx
				text-align center
				font-size 28rpx
				box-sizing border-box
				&.active
					border-bottom 1px solid red
		.main
			height calc(100vh - 160rpx)
			.mainItem
				.banner
					image
						width 100%
						height 300rpx
				.iconList
					margin-top 10rpx
					display flex
					justify-content space-around
					.iconItem
						display flex
						align-items center
						.iconImg
							width 32rpx
							height 32rpx
						.iconText
							font-size 26rpx
				.catList
					display flex
					flex-wrap wrap
					.catItem
						width 20%
						display flex
						flex-direction column
						align-items center
						.catImg
							width 110rpx
							height 110rpx
							border-radius 20rpx
							margin 20rpx
						.catText
							font-size 28rpx
</style>
